<script setup>
import { provide, onMounted, watch, inject, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useConfigStore } from '@/stores/config'

import Drawer from '@/components/common/Drawer.vue'
import { ElMessageBox } from 'element-plus'

const authStore = useAuthStore()
const configStore = useConfigStore()

const user = computed(() => authStore.user)

const route = useRoute()
const router = useRouter()
const isSmallPage = inject('isSmallPage', false)

const navActive = computed(() => route.name)
const navItems = computed(() => getUserMenus())
const allMenus = [
  {
    name: 'userInfo',
    title: '账户信息',
    icon: 'user',
    path: '/user/info',
  },
  // {
  //   name: 'userCharge',
  //   title: '购买套餐',
  //   icon: 'gift',
  // },
  {
    name: 'userScoreLog',
    title: '积分日志',
    icon: 'coins',
  },
  {
    name: 'userAward',
    title: '签到奖励',
    icon: 'award',
  },
  {
    name: 'userInvite',
    title: '邀请好友',
    icon: 'glass-cheers',
  },
  {
    name: 'documentHelp',
    title: '帮助中心',
    icon: 'info-circle',
  },
]

const getUserMenus = () => {
  let disabledMenu = []
  if (!configStore.get('user.invite_enabled')) {
    disabledMenu.push('userAward')
  }
  if (!configStore.get('user.invite_enabled')) {
    disabledMenu.push('userInvite')
  }
  if (!isSmallPage.value) {
    disabledMenu.push('documentHelp')
  }
  return allMenus.filter((item) => !disabledMenu.includes(item.name))
}

const navigateToDefault = (name) => {
  if (name === 'user' || name === '') {
    router.replace({ name: isSmallPage.value ? 'userIndex' : 'userInfo' })
  }
}

const logout = async () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await authStore.clear()
      ElMessage.success('已登出账号')
      route.push({ name: 'authLogin' })
    })
    .catch(() => {})
}

//用户登出后，路由变化
watch(
  () => authStore.isAuthenticated,
  (value) => {
    if (!value) {
      router.replace({ name: 'authLogin', query: { redirect: encodeURIComponent(route.fullPath) } })
    }
  }
)

watch(
  () => route.name,
  (name) => {
    navigateToDefault(name)
  }
)

navigateToDefault(route.name)

provide('user', user)
provide('logout', logout)
provide('userMenus', navItems)
</script>

<template>
  <div class="sm:flex h-full">
    <Drawer width="w-44" v-if="!isSmallPage">
      <el-scrollbar class="subnav p-2">
        <template v-for="navItem in navItems">
          <RouterLink
            :to="{ name: navItem.name }"
            :class="{ 'subnav-item': true, active: navActive === navItem.name }"
          >
            <FontAwesomeIcon :icon="navItem.icon" />
            <span>{{ navItem.title }}</span>
          </RouterLink>
        </template>
      </el-scrollbar>
    </Drawer>
    <el-scrollbar class="w-full h-full lg:px-5">
      <RouterView />
    </el-scrollbar>
  </div>
</template>

<style scoped>
.subnav {
  @apply flex flex-col w-full min-h-80 text-sm;
}

.subnav-item {
  @apply flex items-center relative px-4 py-2 mb-1 cursor-pointer rounded space-x-1
  hover:bg-[--el-fill-color-light];
}

.subnav-item svg {
  width: 20px;
}

.subnav-item.active {
  @apply bg-[--el-fill-color-dark];
}
</style>
